<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        computed和watch之间的区别：
            1、computed能完成的功能，watch都能完成
            2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
        两个重要的小原则：
            1、所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或者组件实例对象
            2、所有不是Vue所管理的函数(定时器的回调函数，ajax的回调函数,promise的回调函数等)，最好写成箭头函数
                这样this的指向才会是vm
     -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br>
        名: <input type="text" v-model:value="lastName"><br>
        姓名: <span>{{fullName}}</span>
    </div>

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三',
                fullName:'张-三'
            },
            // computed:{
                // 完整写法
                // fullName:{
                //     // get什么时候调用：1、初次读取fullname时。 2、所依赖的数据(使用到的)发生改变时
                //     get(){
                //         // console.log(this)//此处的this是vm
                //         return this.firstName + '-' + this.lastName
                //     },
                //     // set什么时候调用：当fullName被修改时
                //     set(value){
                //         console.log('set',value)
                //         const arr = value.split('-');
                //         this.firstName = arr[0];
                //         this.lastName = arr[1]
                //     }
                    
                // }
                // --------------------------------------------------
                // 简写(只读不改时才有简写)
                // fullName:function(){
                //     // console.log(this)//此处的this是vm
                //     return this.firstName + '-' + this.lastName
                // }
            // },
            watch:{
                firstName(newValue,oldValue){
                    // setInterval正常写this指的是window
                    setInterval(()=>{//注意：这里使用箭头函数，箭头函数没有自己的this
                        this.fullName = newValue + '-' + this.lastName
                    },1000)
                },
                lastName(newValue,oldValue){
                    this.fullName = this.firstName + '-' + newValue
                }
            }
        })
    </script>
</body>
</html>